import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {AtIcon} from 'taro-ui'
import {View, Image, Navigator} from '@tarojs/components'
import {GetRequest, vcmonitor} from "../../utils/tools";
import {TARO_ENV} from "../../constants/api";
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import './poster.scss'

export default class Poster extends Component {
  state = {
    imgSrc: '',
    top: 0
  }
  posterType

  async componentDidShow() {
    this.posterType = await Taro.getStorageSync('posterType')
    if (this.posterType == '1') {
      this.posterType = 'posterType'
      Taro.removeStorageSync('posterType')
    }
    vcmonitor(this)
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    if (!Taro.getCurrentInstance().router.params || !Taro.getCurrentInstance().router.params.url) {
      Taro.showToast({title: '海报不存在', icon: 'none'})
      const timer = setTimeout(() => {
        clearTimeout(timer)
        Taro.navigateBack()
      }, 1500)
      return
    }
    if (TARO_ENV === "weapp") {
      const setting = await Taro.getSetting()
      if (!setting.authSetting['scope.writePhotosAlbum']) {
        const r = await Taro.authorize({
          scope: 'scope.writePhotosAlbum',
        }).catch(() => {
          Taro.showModal({
            title: '提示',
            content: '我们需要权限帮您保存海报到相册，请打开保存到相册',
            cancelText: '不需要',
            confirmText: '好的',
            success: (ret) => {
              if (ret.confirm) {
                Taro.openSetting()
              }
            }
          })
        })
      }
      Taro.showLoading({title: '下载中...'})
      Taro.getImageInfo({
        src: Taro.getCurrentInstance().router.params.url,
      }).then((res) => {
        Taro.hideLoading()
        this.setState({imgSrc: res.path})
      }).catch(err => {
        Taro.hideLoading()
        //console.log(err)
        Taro.showToast({title: '海报不存在', icon: 'none'})
        Taro.navigateBack()
      })
      Taro.getSystemInfo().then(res => {
        this.setState({top: res.statusBarHeight})
      })
    } else {
      this.setState({imgSrc: Taro.getCurrentInstance().router.params.url})
    }
  }

  savePhoto() {
    Taro.saveImageToPhotosAlbum({
      filePath: this.state.imgSrc,
    }).then(() => {
      Taro.showToast({
        title: '保存成功，请进入相册查看',
        icon: 'none'
      })
    })
  }

  imgClick() {
    Taro.previewImage({
      current: this.state.imgSrc,
      urls: [this.state.imgSrc]
    })
  }

  render() {
    const {imgSrc, top} = this.state

    return (
      <View className={`poster-root ${this.posterType}`}>
        <GzhAuth />
        {TARO_ENV === 'weapp' && <Navigator className='back' style={`top: ${top + 5}Px`} openType='navigateBack'>
          <AtIcon value='chevron-left' size='26' color='#efefef'/>
        </Navigator>}
        <Image onClick={this.imgClick.bind(this)} className={`img ${TARO_ENV + 'img'}`} src={imgSrc}
          mode='widthFix'
        />
        {TARO_ENV === 'weapp' ? <View className='btn' onClick={this.savePhoto.bind(this)}>保存到相册</View> :
          <View className={`text ${TARO_ENV + 'text'}`} onClick={this.savePhoto.bind(this)}>请长按图片保存至相册</View>}
      </View>
    )
  }
}
